<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <div id="app">
            <input type="button" value="获取雷二丫" @click="add" ref="mybtn">
            <!-- 通过ref可以获取DOM节点元素 -->
            <h2 id="mydog" ref="mydog">雷憨憨，今天敲可爱的！！！</h2>
            <hr>
            <!-- 通过ref也可以获取到子组件的data内容和methods方法 -->
            <asd ref="mytwodog"></asd>
        </div>
        <template id="coml">
            <div>
                <h2>雷二丫也很可爱呀</h2>
            </div>
        </template>
        <script src="./lib/vue-2.4.0.js"></script>
        <script>
            const asd={
                template:"#coml",
                data(){
                    return {
                        msg:"2333"
                    }
                },
                methods: {
                    show(){
                        console.log('二狗子')
                    }
                },
            }
            var vm = new Vue({
                el: '#app',
                data: {

                },
                methods: {
                    add(){
                        console.log(this.$refs.mytwodog.msg)
                        this.$refs.mytwodog.show()
                    }
                },
                components:{
                    asd
                }
            })
        </script>
    </body>
</html>